<template>
  <el-dialog title="配置" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="onClose()" v-draggable>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="mt-3" :before-leave="beforeLeave">
      <el-tab-pane v-for="item in tabList" :key="item" :label="'区域' + item" :name="item"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="form" label-width="70px" class="d-flex flex-wrap mt-2">
      <el-form-item label="选择设备" prop="deciceVal">
        <el-select v-model="form.deciceVal" placeholder="请选择" class="mr-4" @change="getList(1)">
          <el-option v-for="item in options" :key="item.deviceCode" :label="item.deviceName"
                     :value="item.deviceCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="输入名称" prop="name" class="mr-4">
        <el-input v-model="form.name" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="参数名称" prop="input">
        <el-input v-model="form.input" placeholder="参数名称模糊查询" @input="getList()"/>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border class="my_table mt-3" height="40vh" ref="multipleTable"
              @selection-change="handleSelectionChange">
      <el-table-column prop="parameterName" label="参数名称" align="center"></el-table-column>
      <el-table-column prop="parameterCode" label="参数代码" align="center"></el-table-column>
      <el-table-column prop="parameterValue" label="参数值" align="center"></el-table-column>
      <el-table-column prop="parameterValueName" label="参数值名称" align="center"></el-table-column>
      <el-table-column type="selection" width="70" align="center"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave">保 存</el-button>
      <el-button @click="onClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { queryDeviceRealDataInfo } from "@/api/projectOverview/index"
  import { insertOrUpdateVVisualizationDetail } from "@/api/chartControl/index"

  export default {
    data() {
      return {
        // threeList: [],
        value: "",
        activeName: "1",
        options: [],
        tableData: [],
        multipleSelection: [],
        dialogVisible: false,
        selectData: [],
        tabList: [],
        form: {
          name: "",
          input: "",
          deciceVal: ""
        },
        items: [],
        configCode: null,
        partIndex: null
      }
    },
    mounted() {

    },
    methods: {
      editAndShow() {
        for (let i = 0; i < this.items.length; i++) {
          this["arr" + this.items[i].inIndex] = [this.items[i]]
        }
        this.handleClick()
      },

      getList(type) {
        // if (this.deviceVal == '') return false
        queryDeviceRealDataInfo({
          deviceCode: this.form.deciceVal,
          messages: this.form.input
        }).then((res) => {
          this.tableData = res.object
          if (type == 1) {
            this.toggleSelection()
          } else {
            this.toggleSelection(this["arr" + this.activeName])
          }
        })
      },

      onSave() {
        if (this.activeName == this.activeName[this.activeName.length - 1]) {
          this.beforeLeave(this.activeName, this.activeName)
        }
        let obj = {
          tkType: 3,
          configCode: this.configCode,
          partIndex: this.partIndex,
          items: this.items
        }
        obj = JSON.stringify(obj)
        insertOrUpdateVVisualizationDetail({ items: obj }).then((res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.onClose()
          }
        })
      },
      beforeLeave(newName, oldActiveName) {
        let url = ""
        if (this["arr" + this.activeName] == undefined) return
        this["arr" + this.activeName]
          .map((iten) => iten.parameterCode)
          .map((item, index) => {
            if (index == 0) {
              url += item
            } else {
              url += "&" + item
            }
          })
        let obj = {
          inIndex: oldActiveName,
          deviceCode: this.form.deciceVal,
          deviceName: this.options.find((ele) => ele.deviceCode == this.form.deciceVal) ? this.options.find((ele) => ele.deviceCode == this.form.deciceVal).deviceName : "",
          parameterCode: url,
          parameterName: this.form.name
        }
        let index = this.items.findIndex((item) => item.inIndex == oldActiveName)
        if (index == -1) {
          this.items.push(obj)
        } else {
          this.items[index] = obj
        }
      },

      handleSelectionChange(val) {
        this["arr" + this.activeName] = val

        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      },

      handleClick(val) {
        this.form.name = this.items.find((val) => val.inIndex == this.activeName) ? this.items.find((val) => val.inIndex == this.activeName).parameterName : ""
        this.form.deciceVal = this.items.find((val) => val.inIndex == this.activeName) ? this.items.find((val) => val.inIndex == this.activeName).deviceCode : ""
        if (this.form.deciceVal) {
          this.getList()
        } else {
          this.tableData = []
        }
      },


      toggleSelection(data) {
        this.$refs.multipleTable.clearSelection()
        if (data && data.length != 0) {
          data.forEach((row) => {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(
                this.tableData.find((item) => {
                  return row.parameterCode == item.parameterCode
                }), true)
            })
          })
        }
      },

      onClose() {
        this.value = ""
        this.activeName = "1"
        this.form = {
          name: "",
          deciceVal: ""
        }
        this.items = []
        this.options = []
        this.tabList = []
        this.tableData = []
        this.multipleSelection = []
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__footer {
      text-align: center !important;
    }
  }

  ::v-deep .el-dialog__header {
    border-radius: 8px 8px 0 0;
    background-color: #e6e6e6;
  }

  .ml-3 {
    margin-left: 12px;
  }

  .my_span {
    font-size: 16px;
  }

  // ::v-deep .el-table {

  //     tr th {
  //         background-color: #e6e6e6;
  //         border-right: none;
  //     }
  // }
</style>
